---
import { Observed, Section } from "#components/fragments";
import { Image } from "#components/primitives";
import hybridEditorImageDark from "#assets/images/dark/hybrid-editor.png";
import hybridEditorImageLight from "#assets/images/light/hybrid-editor.png";
import editorImageDark from "#assets/images/dark/editor.png";
import editorImageLight from "#assets/images/light/editor.png";
import { mdiPlayCircle } from "@mdi/js";
import { IconButton } from "#components/primitives";
import SectionHeadline from "#components/fragments/section-headline.astro";
---

<Section>
  <SectionHeadline
    title="Technical content editor"
    subtitle="Featuring first-class code editing, and custom content support."
  />
  <div class="relative md:pr-16">
    <div class="grid-background -z-1 !h-[150%] !w-[200%] !-top-[25%] !-left-[50%]"></div>

    <Observed
      client:visible
      class="transition-all duration-500 ease-out"
      outOfViewClass="invisible translate-y-16 opacity-0"
      immediate
    >
      <div
        class="h-full w-[calc(100%-4rem)] top-0 left-0 absolute bg-gray-50 dark:bg-gray-800 rounded-2xl"
      >
      </div>
      <Image
        alt="Vrite editor"
        srcDark={editorImageDark}
        srcLight={editorImageLight}
        class="rounded-2xl border-2 border-gray-200 dark:border-gray-700 gradient-image-mask"
      />
    </Observed>
    <Observed
      client:visible
      class="transition-all delay-250 duration-500 ease-out rounded-2xl absolute -bottom-32 -right-4 w-2/3 xl:-right-16 md:w-1/2"
      outOfViewClass="invisible translate-y-16 opacity-0"
      immediate
    >
      <div class="absolute top-0 left-0 h-full w-full bg-gray-50 dark:bg-gray-800 rounded-2xl">
      </div>
      <Image
        alt="Vrite editor graphic"
        srcDark={hybridEditorImageDark}
        srcLight={hybridEditorImageLight}
        class="rounded-2xl border-2 border-gray-200 dark:border-gray-700 gradient-image-mask"
      />
    </Observed>
  </div>
  <div
    class="text-lg md:text-2xl text-gray-600 dark:text-gray-200 md:max-w-1/2 pt-0 z-1 mt-12 md:-mt-12"
  >
    <p>
      Write and format with ease, thanks to modern WYSIWYG editor with built-in Markdown and
      keyboard shortcuts. Enjoy IDE-level syntax highlighting and autocompletion and customize your
      content with XML-like elements.
    </p>
    <div class="flex justify-start mt-2">
      <IconButton
        path={mdiPlayCircle}
        link="https://editor.vrite.io"
        target="_blank"
        class="m-0"
        label="Try out standalone Vrite editor"
        color="primary"
        text="base"
        variant="text"
      />
    </div>
  </div>
</Section>
